<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://java.sun.com/jsf/html" 
      xmlns:comps="http://java.sun.com/jsf/composite/comps" 
      xmlns:f="http://java.sun.com/jsf/core" >

    <body>

        <ui:composition template="./../resources/templates/newTemplate.xhtml">

            <ui:define name="logInfo">
                <h:link value="Inicio" outcome="/vistas/inicio" />
            </ui:define>

            <ui:define name="left" >
                <comps:categoriesMenu />
            </ui:define>

            <ui:define name="principal">

                <table id="simpleItem">
                    <tr>
                        <td colspan="2">
                            <h:form>
                                <h:commandLink value="#{publicacionDesplegada.publicacion.categoriaF.nombre}->  " 
                                               style="font-size: 18px; text-decoration: none"
                                               action ="verCategoria">
                                    <f:setPropertyActionListener target="#{menuCatBean.categoriaSeleccionada}" 
                                                                 value="#{publicacionDesplegada.publicacion.categoriaF.id}" />
                                </h:commandLink>                            
                                <h:outputText value="#{publicacionDesplegada.publicacion.titulo}" 
                                              styleClass="itemTitle" />                            
                                <div id="fb-root"></div>

                            </h:form>
                        </td>
                    </tr>
                    <tr>
                        <td width="310" >
                            <h:form id="principalForm">

                                <h:panelGrid  styleClass="dataPrincipal" columns="2"  >
                                    <h:outputText value="Propietario: " styleClass="itemInfo"  escape="false"/>
                                    <h:link value="#{publicacionDesplegada.publicacion.propietario.nombre}" 
                                            styleClass="itemInfo" style=" color: #556275" outcome="/vistas/verReputacion" >
                                        <f:param name="id" value="#{publicacionDesplegada.publicacion.propietario.id}" />
                                    </h:link>
                                    <h:outputText value="Reputación: " styleClass="itemInfo" escape="false"/>
                                    <p:rating value="#{publicacionDesplegada.userRating}" stars="10" disabled="true"/> 
                                </h:panelGrid>                                 

                                <h:panelGrid id="data" styleClass="dataPrincipal" style="margin-top: 10px;" columns="1"  >

                                    <h:dataTable value="#{publicacionDesplegada.publicacion.precios}"
                                                 var="precio" style="width: 100%" >
                                        <h:column>
                                            <h:outputText value="Precio por #{precio.periodoNombre}:" 
                                                          styleClass="itemInfo"/>  
                                        </h:column>        
                                        <h:column>
                                            <h:outputText value=" $ #{precio.precio}" 
                                                          styleClass="itemPrice"/>  
                                        </h:column>
                                    </h:dataTable>

                                    <h:outputText value="Origen: #{publicacionDesplegada.publicacion.barrio}, 
                                                  #{publicacionDesplegada.publicacion.ciudad}" 
                                                  styleClass="itemInfo"  escape="false" style="padding-right: 5px"/> 
                                    <h:outputText value="Finaliza el #{publicacionDesplegada.fecha_hasta}" 
                                                  styleClass="itemInfo" escape="false"/>  
                                    <h:outputText value="Disponibilidad máxima: #{publicacionDesplegada.publicacion.cantidad}" 
                                                  styleClass="itemInfo"/> 
                                    <p:commandButton icon="ui-icon-plusthick" value="Favoritos" rendered="#{not publicacionDesplegada.addedToFavorito}" 
                                                     title="Agregar a Favoritos" actionListener="#{publicacionDesplegada.agregarFavorito}" 
                                                     style="background-color: #3E58F6; margin-left: 80px; font-size: 0.8em;" update="data growl">
                                        <f:attribute name="idPublicacion" value="#{publicacionDesplegada.publicacionId}" />
                                    </p:commandButton>
                                </h:panelGrid>                            
                                <div class="dataPrincipal" >
                                    <h:panelGrid columns="3" style="margin: 0 auto" cellpadding="4">
                                        <h:outputLabel   value="Cantidad:" />
                                        <p:spinner value="#{publicacionDesplegada.cantidadProductos}" required="true" size="3"/>
                                        <p:commandButton value="Alquilar" action="#{publicacionDesplegada.actualizarFechas}" 
                                                         oncomplete="revisarDisponibilidad(xhr, status, args)" styleClass="buttom"
                                                         update="growl :rent" />
                                    </h:panelGrid>
                                </div>
                                <p:growl id="growl" showDetail="true" globalOnly="true" />

                            </h:form>
                        </td>
                        <td width="400" style="text-align: right">

                            <div class="fb-like" data-send="false" data-width="300" data-show-faces="false" data-font="arial"></div>
                            <br/><br/>
                            <p:galleria value="#{publicacionDesplegada.idImagenes}" var="image"
                                        effect="#{publicacionDesplegada.effect}" effectSpeed="1000" 
                                        panelWidth="320" panelHeight="300" 
                                        rendered="#{publicacionDesplegada.idImagenes.size() > 1}" >  
                                <h:graphicImage value="/image?id=#{image}" width="320" height="300" /> 
                            </p:galleria>
                            <h:graphicImage value="/image?id=#{publicacionDesplegada.idImagenes.get(0)}" 
                                            rendered="#{publicacionDesplegada.idImagenes.size() == 1}" width="320" height="300" /> 
                            <h:graphicImage value="#{resource['images:noImage.png']}" width="320" height="300"
                                            rendered="#{empty publicacionDesplegada.idImagenes}" style="border: 1px solid black;" />

                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" style="text-align: right">
                            <p:commandButton type="button" value="Ver ubicación del artículo" onclick="map.show()"/> 
                        </td>                    
                    </tr>

                    <tr>
                        <td colspan="2"  >
                            <h:panelGrid  styleClass="data" columns="1" >
                                <h:outputText value="#{publicacionDesplegada.publicacion.descripcion}" 
                                              styleClass="itemDescription" escape="false"/> 
                            </h:panelGrid>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <p:ajaxStatus style="width:16px;height:16px;">  
                                <f:facet name="start">  
                                    <h:graphicImage value="#{resource['images:ajax-loader.gif']}" />  
                                </f:facet>  
                                <f:facet name="complete">  
                                    <h:outputText value="" />  
                                </f:facet>  
                            </p:ajaxStatus>
                            <h:form id="desplieguePreguntas" style="width: 100%">  
                                <div class="preguntas">
                                    <p:outputPanel id="preguntas" > 
                                        <p:commandButton style="margin: 10px 10px 0px 5px;" value="Hacer una pregunta" 
                                                         actionListener="#{publicacionDesplegada.preguntar}" 
                                                         oncomplete="agregarPregunta(xhr, status, args)"
                                                         update=":principalForm:growl"/>  
                                        <h:dataTable value="#{publicacionDesplegada.comentarios}" var="pregunta">  
                                            <p:column>  
                                                <comps:itemPreguntas />
                                            </p:column>  
                                        </h:dataTable>  
                                    </p:outputPanel>  
                                </div>

                            </h:form>   
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <h:link value="Denunciar esta publicacion"
                                    outcome="/vistas/usuario/denunciaDePregunta"
                                    rendered="#{publicacionDesplegada.ownerLogged == false}"
                                    style="color: black; font-size: 12px" >
                                <f:param name="motivo" value="1" />
                                <f:param name="id" value="#{publicacionDesplegada.publicacion.id}" />                        
                            </h:link>
                        </td>                    
                    </tr>                    
                </table>

                <p:dialog header="Ingrese su pregunta" widgetVar="nuevaPregunta" modal="true"
                          showEffect="fade" width="280" resizable="false" >
                    <h:form>
                        <h:panelGrid columns="1" id="grid" style="text-align: center; width: 250px">  
                            <h:outputLabel value="Pregunta: " for="txt_title" /> 
                            <p:inputTextarea id="txt_title" autoResize="false" rows="5"    
                                             value="#{publicacionDesplegada.nuevaPregunta.comentario}" 
                                             style="width: 200px;" />
                            <f:facet name="footer" >
                                <p:commandButton value="Enviar Pregunta" update=":desplieguePreguntas:preguntas :principalForm:growl @parent"  
                                                 action="#{publicacionDesplegada.guardarPregunta}"
                                                 onclick="nuevaPregunta.hide()">  
                                    <p:collector value="#{publicacionDesplegada.nuevaPregunta}"   
                                                 addTo="#{publicacionDesplegada.comentarios}" />
                                </p:commandButton>
                                <p:commandButton value="Cancelar" type="reset" onclick="nuevaPregunta.hide()" />  
                            </f:facet>
                        </h:panelGrid>  
                    </h:form>
                </p:dialog>

                <p:dialog  header="Enviar pedido de alquiler" widgetVar="confirmRent" modal="true"
                           resizable="false" showEffect="fade" width="450" >
                    <h:form id="rent" prependId="false">
                        <script type="text/javascript" >
                            jQuery(function () {
                                window.setTimeout('bindEventsHighlights()',500);
                            });

                            function bindEventsHighlights() {
                                var specialDays = <h:outputText value="#{publicacionDesplegada.fechas}" /> ;
                                jQuery(".hasDatepicker").datepicker("option", "beforeShowDay", function (date) {
                                    return highlightCalendar(specialDays, date, 'highlight-calendar');
                                });
                            };
                        </script>
                        <h:panelGrid  columns="3" cellpadding="2" cellspacing="4" >
                            <h:outputLabel value="Periodo mínimo:"/>
                            <h:panelGroup>
                                <h:outputLabel value="#{publicacionDesplegada.publicacion.periodoMinimoValor} "/>
                                <h:outputLabel value="#{publicacionDesplegada.publicacion.periodoMinimo.nombre}"/>
                            </h:panelGroup>
                            <p/>

                            <h:outputLabel value="Periodo máximo:"/>
                            <h:panelGroup>
                                <h:outputLabel value="#{publicacionDesplegada.publicacion.periodoMaximoValor} "/>
                                <h:outputLabel value="#{publicacionDesplegada.publicacion.periodoMaximo.nombre}"/>
                            </h:panelGroup>
                            <p/>

                            <h:outputLabel  value="Tiempo solicitado:" />
                            <h:panelGroup>
                                <p:inputText id="tiempoSolicitado" value="#{publicacionDesplegada.periodoAlquiler}" 
                                             required="true"  style="width:40px; text-align: right; vertical-align: middle" 
                                             requiredMessage="Valor requerido"/>

                                <p:selectOneMenu value="#{publicacionDesplegada.periodoSeleccionado}"
                                                 style="width: 100px; margin-left: 10px; vertical-align: middle" >
                                    <f:selectItems value="#{publicacionDesplegada.periodos}" />
                                    <p:ajax event="change" update="rent" />
                                </p:selectOneMenu>                                            
                            </h:panelGroup>    
                            <p:message for="tiempoSolicitado" />

                            <h:outputLabel id="horaInicioLabel" value="Hora de inicio" 
                                           rendered ="#{publicacionDesplegada.periodoSeleccionado == 1}"/>
                            <p:calendar id="horaInicio" required="true" value="#{publicacionDesplegada.horaInicioAlquiler}" 
                                        pattern="HH:mm" timeOnly="true" stepHour="1" stepMinute="15"
                                        style="width:50px; text-align: right"
                                        requiredMessage="Valor requerido" 
                                        rendered ="#{publicacionDesplegada.periodoSeleccionado == 1}"/>
                            <p:message id="horaInicioMessage" for="horaInicio" 
                                       rendered ="#{publicacionDesplegada.periodoSeleccionado == 1}"/>

                            <h:outputLabel value="Fecha de inicio: "/>
                            <p:calendar id="rentCalendar" mode="inline" value="#{publicacionDesplegada.fechaInicio}" 
                                        pattern="dd/MM/yyyy" mindate="#{publicacionDesplegada.today}"
                                        required="true" requiredMessage="Valor requerido" />
                            <p:message for="rentCalendar" />
                            <p/>
                        </h:panelGrid>
                        <p:commandButton value="Confirmar" action="#{publicacionDesplegada.confirmarPedido}" 
                                         onclick ="confirmRent.hide()" ajax="false"/>
                    </h:form>                              
                </p:dialog>

                <p:dialog widgetVar="map" header="Ubicación" modal="true" onShow="myMap.checkResize()"
                          showEffect="fade" width="425" height="450" resizable="false" >
                    <p:gmap center="#{publicacionDesplegada.publicacion.latitud + 0.007502},
                            #{publicacionDesplegada.publicacion.longitud - 0.008808}"
                            zoom="15" type="HYBRID" style="width:400px;height:400px;"
                            widgetVar="myMap" model="#{publicacionDesplegada.mapModel}" />
                </p:dialog>

                <script>(function(d, s, id) {
                    var js, fjs = d.getElementsByTagName(s)[0];
                    if (d.getElementById(id)) return;
                    js = d.createElement(s); js.id = id;
                    js.src = "//connect.facebook.net/es_LA/all.js#xfbml=1\u0026appId=187196061385476";
                    fjs.parentNode.insertBefore(js, fjs);
                }(document, 'script', 'facebook-jssdk'));</script>

                <script type="text/javascript"
                        src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAIvenuSuB8qlfz056q69ddMHJIdqra2sc&amp;sensor=false">
                </script>


            </ui:define>
        </ui:composition>       

    </body>
</html>
